<style>
    img{
        width: 100px;
        height: 100px;
    }
</style>
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
<div id = 'app'>
    <table border="1px">
        <thead>
            <tr>
                <th> <input type="checkbox">全选</th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
                
        </thead>
        <tbody>
            <tr v-for="(item,index) in arr" :key="item.id">
                <td><input type="checkbox" :checked="item.is" @click="check(item)"></td>
                <td><img :src="item.img" alt=""></td>
                <td>{{item.jiage | money()}}</td>
                <td><button @click="jia(item.id)">+</button><span>{{item.num}}</span><button @click="jian(item.id)">-</button></td>
                <td><button @click="fn(item.id)">删除</button></td>
            </tr>
        </tbody>
    </table>
    <h1>总价：{{zong}}</h1>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            arr:[
        {
            img:'https://paimgcdn.baidu.com/24BCE86C7EAF1B01?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16173383402.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 2匹3匹',
            jiage:3899,
            num:1,
            is:false
        },
        {
            id:2,
            img:'https://paimgcdn.baidu.com/ADF29C1EBF45A489?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F9855694026.jpg&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-72LW',
            jiage:6099,
            num:1,
            is:false

        },
        {
            id:3,
            img:'https://paimgcdn.baidu.com/2A2E8A0C9513341C?src=http%3A%2F%2Fms.bdimg.com%2Fdsp-image%2F16759572162.png&rz=urar_2_968_600&v=0',
            jieshao:'海尔 KFR-35GW',
            jiage:3699,
            num:1,
            is:false
        }
        ]
        },
        methods:{
          fn: function(i){
            var a = this.arr.findIndex(item => item.id == i)
            this.arr.splice(a,1)
          },
          jia: function(b){
            var c = this.arr.find(item => item.id == b)
            c.num++
          },
          jian: function(d){
            var e = this.arr.find(item => item.id == d)
            if(e.num >1){
                e.num--
            }
           
          },
         //   选中商品
          check(item){
            if(item.is){
                item.is=false
                this.all_check= false
            }else {
                item.is = true
                this.all_check =this.car_arr.every(item => item.is == true)
            }
           },
       },
        computed:{
           zong(){
            var num = 0
            this.arr.forEach(item=>{
                if(item.is) {
                    num += item.price * item.num
                }
            })
            return num
           }
        },
        filters:{
            money(jiage){
                 return '￥'+ jiage
            }
        }
    
    })
</script>